<template>
    <nav-bar>
    <div slot="left"  class="left" @click="backClick"><img src="~assets/img/common/back.svg" alt=""></div>
    <div class="center" slot="center">
        <div class="center-item" v-for="(item,index) in titles" :key="index" @click="itemClick(index)"
        :class="{active:currentIndex==index}">{{item}}</div>
    </div>
</nav-bar>
</template>
<script>
import NavBar from "components/common/navbar/NavBar"

export default {
    name:'DetailNavBar',
    components:{
        NavBar
    },
    data(){
        return {
            titles:['商品','参数','评论','推荐'],
            currentIndex:0
        }
    },
        methods:{
        itemClick(index){
            this.currentIndex=index;
            this.$emit("titleClick",this.currentIndex);
        },
        backClick(){
            this.$router.back();
        }
    }
}
</script>
<style scoped>
.center{
    display: flex;
}
.center-item{
    flex: 1;
}
.left{
    margin-top: 6px;
}
.active{
    color: var(--color-height-text);
}
</style>